
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	  xmlns:th="http://www.thymeleaf.org" lang="zh">
	<nav th:fragment="topbar" id="commonId">
		<body>
			<div id="Header" style="margin-top: 60px;">
				<div id="Logo">
					<div id="LogoContent">
						<a href="/catalog/main"><img src="../../static/images/logo-topbar.gif" /></a>
					</div>
				</div>
				<div id="Menu">
					<div id="MenuContent">
						<a href="/viewCart">
							<img align="middle" name="img_cart" src="../../static/images/cart.gif" />
						</a>
						<img align="middle" src="../../static/images/separator.gif" />
						<a th:text="${session.localUser}"></a>
						<a href="/account/signOn" >Sign In</a>
						<a href="/account/loginOut">Sign Out</a>
						<img align="middle" src="../../static/images/separator.gif" />
						<a href="/account/userInfo">My Account</a>
						<img align="middle" src="../../static/images/separator.gif"  alt="middle"/>
						<a href="/help">?</a>
						<img align="middle" src="../../static/images/separator.gif" />
						<a href="/admin/token">backend</a>


					</div>
				</div>
				<div id="Search">
					<div id="SearchContent">
						<form action="/common/Search" method="post">
							<input id="suinput" type="text" name="keyword" size="14" />
							<input id="subutton" type="submit" name="searchProducts" value="Search" />
						</form>
					</div>
				</div>
				<div id="QuickLinks">
					<a href="/catalog/product/FISH">
						<img src="../../static/images/sm_fish.gif" />
					</a>
					<img src="../../static/images/separator.gif" />
					<a href="/catalog/product/DOGS">
						<img src="../../static/images/sm_dogs.gif" />
					</a>
					<img src="../../static/images/separator.gif" />
					<a href="/catalog/product/REPTILES">
						<img src="../../static/images/sm_reptiles.gif" />
					</a>
					<img src="../../static/images/separator.gif" />
					<a href="/catalog/product/CATS">
						<img src="../../static/images/sm_cats.gif" />
					</a>
					<img src="../../static/images/separator.gif" />
					<a href="/catalog/product/BIRDS">
						<img src="../../static/images/sm_birds.gif" />
					</a>
				</div>
			</div>
		</body>
	</nav>

	<nav th:fragment="footer" id="Footer">
		<div id="PoweredBy">&nbsp<a href="www.csu.edu.cn">www.csu.edu.cn</a>
		</div>

		<div id="Banner">
			footer.html
		</div>
	</nav>
	<nav th:fragment="accountFields">
<!--	<h3>Account Information</h3>-->

<!--	<table>-->
<!--		<tr>-->
<!--			<td>First name:</td>-->
<!--			<td><input type="text" name="firstName" /></td>-->
<!--		</tr>-->
<!--		<tr>-->
<!--			<td>Last name:</td>-->
<!--			<td><input type="text" name="lastName" /></td>-->
<!--		</tr>-->
<!--		<tr>-->
<!--			<td>Email:</td>-->
<!--			<td><input type="text" name="email" /></td>-->
<!--		</tr>-->
<!--		<tr>-->
<!--			<td>Phone:</td>-->
<!--			<td><input type="text" name="phone" /></td>-->
<!--		</tr>-->
<!--		<tr>-->
<!--			<td>Address 1:</td>-->
<!--			<td><input type="text" name="address1" /></td>-->
<!--		</tr>-->
<!--		<tr>-->
<!--			<td>Address 2:</td>-->
<!--			<td><input type="text" name="address2" size="40" /></td>-->
<!--		</tr>-->
<!--		<tr>-->
<!--			<td>City:</td>-->
<!--			<td><input type="text" name="city" /></td>-->
<!--		</tr>-->
<!--		<tr>-->
<!--			<td>State:</td>-->
<!--			<td><input type="text" name="state" size="4" /></td>-->
<!--		</tr>-->
<!--		<tr>-->
<!--			<td>Zip:</td>-->
<!--			<td><input type="text" name="zip" size="10" /></td>-->
<!--		</tr>-->
<!--		<tr>-->
<!--			<td>Country:</td>-->
<!--			<td><input type="text" name="country" size="15" /></td>-->
<!--		</tr>-->
<!--	</table>-->

<!--	<h3>Profile Information</h3>-->

<!--	<table>-->
<!--		<tr>-->
<!--			<td>Language Preference:</td>-->
<!--			<td><select name="languagePreference">-->
<!--				&lt;!&ndash; 循环 &ndash;&gt;-->
<!--				<option th:value>${language }</option>-->

<!--			</select></td>-->
<!--		</tr>-->
<!--		<tr>-->
<!--			<td>Favourite Category:</td>-->
<!--			<td><select name="account.favouriteCategoryId">-->
<!--				<option value="FISH">FISH</option>-->
<!--				<option selected="selected" value="DOGS">DOGS</option>-->
<!--				<option value="REPTILES">REPTILES</option>-->
<!--				<option value="CATS">CATS</option>-->
<!--				<option value="BIRDS">BIRDS</option>-->
<!--			</select></td>-->
<!--		</tr>-->
<!--		<tr>-->
<!--			<td>Enable MyList</td>-->
<!--			<td><input type="checkbox" name="listOption" value="1" /></td>-->
<!--		</tr>-->
<!--		<tr>-->
<!--			<td>Enable MyBanner</td>-->
<!--			<td><input type="checkbox" name="bannerOption" value="1" /></td>-->
<!--		</tr>-->

<!--	</table>-->
</nav>
	<style>
		#Header{
			margin-top: 60px;
			background-color: #FFFFFF;
		}
		#LogoContent{
			margin-left: 40px;
			font-size: 30px;
		}
		#subutton{
			height: 35px;
			width: 100px;
			background-color:  rgba(58,152,254,1.0);
			font-size: 20px;
			color: #FFFFFF;
			outline: none;
			border: none;
			box-shadow: 1px 0px 2px gray,
			0px -1px 2px  gray,
			-1px 0px 2px gray,
			0px 1px 2px  gray;
		}
		#subutton:hover{
			background-color: rgba(0,0,255,0.7);
		}
		#suinput {
			border-width: .1ex .1ex .1ex .1ex;
			border-style: solid;
			border-color: #aaa;
			background-color: #fff;
			color: #000;
			height: 25px;
			width: 150px;
		}
		#Footer{
			background-color: #FFFFFF;
			/*border: 2px red solid;*/
			height: 86.1px;
		}
	</style>
</html>

